<template>
  <div>
    <el-form
      :label-position="left"
      label-width="100px"
      :model="formLabelAlign"
      size="mini"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始日期">
            <el-date-picker
              style="width: 100%"
              v-model="formLabelAlign.startTime"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束日期">
            <el-date-picker
              style="width: 100%"
              v-model="formLabelAlign.endTime"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="呼叫流水号" width="100%">
            <el-input v-model="formLabelAlign.connectId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="来电号码">
            <el-input v-model="formLabelAlign.callNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="满意度">
            <el-select style="width: 100%" v-model="formLabelAlign.aapprove">
              <el-option label="非常满意" value="1"></el-option>
              <el-option label="满意" value="2"></el-option>
              <el-option label="基本满意" value="3"></el-option>
              <el-option label="不满意" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话类型">
            <el-select style="width: 100%" v-model="formLabelAlign.callType">
              <el-option label="呼入" value="I"></el-option>
              <el-option label="呼出" value="O"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户姓名">
            <el-input v-model="formLabelAlign.callCustName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="受理座席">
            <el-input v-model="formLabelAlign.agentName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号">
            <el-input v-model="formLabelAlign.callPaperId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="借据号">
            <el-input v-model="formLabelAlign.loanNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="display: flex; justify-content: end; margin-top: 10px">
        <el-col :span="2">
          <!-- <el-form-ite/m> -->
          <el-button
            type="primary"
            @click="perSearch(formLabelAlign)"
            size="mini"
            >查询</el-button
          >
          <!-- </el-form-item> -->
        </el-col>
        <el-col :span="2">
          <!-- <el-form-item> -->
          <el-button type="primary" @click="perReset()" size="mini"
            >重置
          </el-button>
          <!-- </el-form-item> -->
        </el-col>
      </el-row>
    </el-form>

    <div style="margin-top: 2rem">
      <el-table
        :data="tableData.list"
        tooltip-effect="dark"
        style="width: 100%; font-size: 13px"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        :row-style="tableRowClassName"
      >
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          v-for="(item, index) in tableData.option"
          :key="index"
          :width="item.width"
        >
          <template slot-scope="scope">
            <span v-if="item.prop === 'callType'">
              <!-- {{ scope.row.callType === "I" ? "呼入" : "呼出" }} -->
              <p v-if="scope.row.callType == 'I'">呼入</p>
              <p v-else>呼出</p>
            </span>
            <!-- <span v-if="item.prop === 'aapprove'">
              <p v-if="scope.row.aapprove == '1'">非常满意</p>
              <p v-else-if="scope.row.aapprove == '2'">满意</p>
              <p v-else-if="scope.row.aapprove == '3'">基本满意</p>
              <p v-else-if="scope.row.aapprove == '4'">不满意</p>
            </span> -->

            <!-- 其他列 -->
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >播放</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row
        type="flex"
        justify="end"
        align="middle"
        style="height: 60px"
        v-if="tableData.paging"
      >
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="tableData.page.page"
          :page-size="tableData.page.size"
          layout="total, prev, pager, next"
          :total="tableData.page.total"
          :small="true"
        >
        </el-pagination>
      </el-row>
    </div>
    <AudioPlayer
      :audio-url="passedAudioUrl"
      v-if="isAudioPlayerVisible"
      @close="hideAudioPlayer"
    />
  </div>
</template>

<script>
import { queryRecording } from "@/api/hubeixiaojin/queryInfo";
import AudioPlayer from "./AudioPlayer.vue";

export default {
  name: "soundrecording",
  props: ["data"],
  components: {
    AudioPlayer,
  },
  data() {
    return {
      formLabelAlign: {
        startTime: "", //开始时间
        endTime: "", //结束时间
        connectId: "", //呼叫流水号
        callNo: "", //来电号码
        aapprove: "", //满意度
        callType: "", //呼叫类型
        callCustName: "", //客户姓名
        agentName: "", //受理座席
        callPaperId: "", //客户身份证
        loanNo: "", //借据号
      },
      tableData: {
        list: [],
        option: [
          {
            label: "呼叫流水号",
            prop: "connectId",
          },
          {
            label: "来电时间",
            prop: "callDate",
          },
          {
            label: "电话类型",
            prop: "callType",
          },
          {
            label: "客户姓名",
            prop: "callCustName",
          },
          {
            label: "身份证号码",
            prop: "callPaperId",
          },
          {
            label: "来电号码",
            prop: "callNo",
          },
          {
            label: "摘要",
            prop: "sumContent",
          },
          {
            label: "业务类型",
            prop: "reasonInput",
          },
          {
            label: "受理座席",
            prop: "agentName",
          },
          {
            label: "通话时长(秒)",
            prop: "handelTime",
          },
          {
            label: "服务时长(秒)",
            prop: "serviceTime",
          },
          {
            label: "满意度",
            prop: "aapprove",
          },
        ],
        page: {
          page: 1,
          size: 10,
          total: 0,
        },
        paging: true,
      },
      agentInfo: {
        //当前座席名字和id
        // dispatchingPerson: Constants.Agent.agentName,
        // dispatchingId: Constants.Agent.agentId,
        // //目标座席和id
        // agentId: "",
        // agentName: "",
        // //座席行政组
        // deptGroupName: Constants.Agent.deptGroupName,
        // //行政组code
        // deptGroupCode: Constants.Agent.deptGroupCode,
        // //access_token
        // access_token: Constants.Agent.access_token,
        // //tenantId
        // tenantId: Constants.Agent.tenantId,
        // //orgCode
        // orgCode: Constants.Agent.orgCode
      }, //调单用到的座席信息
      passedAudioUrl: "", //录音地址
      isAudioPlayerVisible: false,
    };
  },
  created() {
    // console.log("进入录音查询");
  },
  // watch: {
  //   '$route': function (to, from) {
  //     console.log("监听【实时扣款查询模块】route变化")
  //     this.$destroy();
  //   }
  // },

  mounted() {
    const sessionStr = sessionStorage.getItem("userInfo");
    const agentUser = JSON.parse(sessionStr);
    this.agentInfo = agentUser.content;
    // this.getinfo();
  },
  methods: {
    handleClick(val) {
      // this.passedAudioUrl =
      //   "https://webfs.kugou.com/202411181741/35e9388ac331bc569805b35482712fa5/v3/5d2fa048650358ef1f1c90dea2529050/yp/full/ap1014_us0_mii0w1iw8z2ai2iphcu80ooo2ki81120_pi406_mx696426593_s4164937933.mp3";
      this.passedAudioUrl = val.recordUrl;
      console.log("播放录音", val.recordUrl);

      if (this.passedAudioUrl == "") {
        return this.$message.error("无有效音频");
      }

      this.isAudioPlayerVisible = true;
    },
    hideAudioPlayer() {
      this.isAudioPlayerVisible = false;
    },
    //录音调听
    getinfo() {
      if (
        this.formLabelAlign.startTime == "" ||
        this.formLabelAlign.endTime == ""
      ) {
        return this.$message.error("开始时间与结束时间必填");
      }
      // else if (this.formLabelAlign.startTime == "") {
      //   return this.$message.error("开始时间必填");
      // } else if (this.formLabelAlign.endTime == "") {
      //   return this.$message.error("结束时间必填");
      // }

      var params = {
        sortCol: "id",
        condition: {
          startTime: this.formLabelAlign.startTime, //开始时间
          endTime: this.formLabelAlign.endTime, //结束时间
          connectId: this.formLabelAlign.connectId, //呼叫流水号
          callNo: this.formLabelAlign.callNo, //来电号码
          aapprove: this.formLabelAlign.aapprove, //满意度
          callType: this.formLabelAlign.callType, //电话类型
          callCustName: this.formLabelAlign.callCustName, //客户姓名
          agentName: this.formLabelAlign.agentName, //受理座席
          callPaperId: this.formLabelAlign.callPaperId, //客户身份证
          loanNo: this.formLabelAlign.loanNo, //借据号
        }, //申请状态
        page: this.tableData.page.page,
        pageSize: this.tableData.page.size,
      };
      queryRecording(params, this.agentInfo)
        .then((res) => {
          console.log("接口返回==", res.data.data);

          this.tableData.list = res.data.data.listData;
          this.tableData.page.total = res.data.data.totalCount;
        })

        .catch((err) => {
          console.log(err);
        });
    },
    perSearch(val) {
      console.log("查询", val);
      this.tableData.page.page = 1;
      this.getinfo();
    },
    perReset() {
      // console.log("重置");
      this.formLabelAlign = {
        startTime: "", //开始时间
        endTime: "", //结束时间
        connectId: "", //呼叫流水号
        callNo: "", //来电号码
        aapprove: "", //满意度
        callType: "", //呼叫类型
        callCustName: "", //客户姓名
        agentName: "", //受理座席
        callPaperId: "", //客户身份证
        loanNo: "", //借据号
      };
    },
    //切换当前页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.tableData.page.page = val;
      this.getinfo();
    },
  },
};
</script>

<style scoped>
.deductionApply .el-col {
  margin-top: 10px;
  width: 32%;
}

.deductionApply .el-col-10 {
  width: 32%;
}

.deductionQuery .el-col-10 {
  width: 35%;
}
</style>
